import {
  ElButton,
  ElDialog,
  ElDrawer,
  ElForm,
  ElFormItem,
  ElIcon,
  ElImage,
  ElInput,
  ElMenu,
  ElMenuItem,
  ElPopover,
  ElSlider,
  ElTable,
  ElTableColumn,
} from 'element-plus'
import VueLazyloadNext from 'vue-lazyload-next'

const EMPTY_IMG =
  ''
export default {
  install(Vue: any) {
    const components = [
      ElButton,
      ElDialog,
      ElForm,
      ElFormItem,
      ElInput,
      ElPopover,
      ElMenu,
      ElMenuItem,
      ElIcon,
      ElImage,
      ElTable,
      ElTableColumn,
      ElSlider,
      ElDrawer,
    ]
    const importComponent = import.meta.glob<{ default: unknown[] }>(
      '../components/base/**/*.tsx',
    ) as any
    for (const path in importComponent) {
      importComponent[path]().then((componentConfig: { default: any }) => {
        const componentName = componentConfig.default.name
        Vue.component(componentName, componentConfig.default || componentConfig)
      })
    }

    components.forEach(component => {
      Vue.component(component.name, component)
    })
    Vue.use(VueLazyloadNext, {
      loading: EMPTY_IMG,
      error: EMPTY_IMG,
    })
  },
}
